﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CameraAutoHeight.aspx.cs" Inherits="ZHDJ.Web.Portal.CameraAutoHeight" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>山海天视频监控系统</title>
    <link href="../Resource/themes/default/css/jqtree.css" rel="stylesheet" />        
    <style>
        body {
            margin: 0 auto;
            font-size: 12px;
            font-family: "宋体", Arial, Helvetica, sans-serif;
            line-height: normal;
            background-repeat: repeat-x;
            background-position: top;
        }

        .btn {
            height: 25px;
            width: 50px;
        }

        .leftclass {
            margin: 0 auto;
            font-size: 12px;
            font-family: "宋体", Arial, Helvetica, sans-serif;
            line-height: normal;
            background-repeat: repeat-x;
            background-position: top;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="height:100%;overflow:hidden;">
                <div id="left_d" style="float: left; width: 320px; margin: 5px; background-color: #ffffff; padding-left: 10px; overflow-x: hidden; border-top: #ccc solid 2px; border: 1px solid #ff0000;position:relative;">
                    <div id="tree1" data-url="other/CameraBranchNavigation.aspx?Json=1&branchid=<%=string.IsNullOrEmpty(UserBranchID)?"D658070EC3BF425BA8417745FDCBFCB0": UserBranchID %>"></div>
                    <div style="position:absolute;top:4px;right:4px; width:20px;height:20px;line-height:20px;border:solid 1px red;font-size:20px; text-align:center;background:#ededed;cursor:pointer;" id="toggle">-</div>
                </div>
                <div style="float: left; border: 1px solid #ff0000; margin: 5px; padding-right: 2px; position: relative;" id="right_d">
                    <iframe id="Iframe" frameborder="0" style="border: 0px; width: 100%; display: none;"></iframe>
                    <div id="tip_content" style="position: absolute; width: 500px; height: 200px; margin: auto; left: 0; right: 0; bottom: 0; top: 0; font-size: 20px;">
                        <div style="text-align: center; width: 100%;">山海天党群工作纪实</div>
                        <div style="margin-top: 20px;">说明：为保证安全，每次打开摄像机必须进行二次登陆。</div>
                    </div>
                    <div id="tip_content2" style="position: absolute; width: 500px; height: 200px; margin: auto; left: 0; right: 0; bottom: 0; top: 0; font-size: 20px;">
                        <div style="text-align: center; width: 100%;">打开中……</div>
                    </div>
                </div>
            </div>
            <div style="display: none"><a id="branchdaolink" href="#" target="_blank"><span>33</span></a></div>
        </div>
    </form>
    <script src="../Resource/js/default/jquery.min.1.12.js"></script>
    <script src="../Resource/js/jquery/tree.jquery.js"></script>
    <script type="text/javascript">
        var BindTreeClick = function () {
            $('#tree1').bind(
                'tree.click',
                function (event) {
                    var node = event.node;
                    if (node.children.length == 0 && node.iscamera == "1") {

                        $("#tip_content").hide();
                        $("#Iframe").hide();
                        $("#Iframe").attr("src", "");
                        //$(window.frames["Iframe"].document).find("#b_quit").click();

                        $("#tip_content2").show();

                        $.get("CameraAutoHeight.aspx",
                         { IsAjax: 1, BranchID: node.id },
                           function (data) {
                               var result = data;
                               if (result != "http://") {
                                   $("#tip_content2").hide();
                                   $("#tip_content").css("display", "none");
                                   $("#Iframe").css("display", "block");
                                   $("#Iframe").attr("src", result);
                                   //window.open(result);
                               }
                           }
                        );
                    }
                }
            );
        }
        var treePara = {
            closedIcon: $('<img class="fa " src="../../Resource/themes/default/images/Default/triangle1.gif" />'),
            openedIcon: $('<img class="fa " src="../../Resource/themes/default/images/Default/triangle3.gif" />'),
            selectable: true,
            autoEscape: false,
            autoOpen: 0,
            onCreateLi: function (node, $li) {
                if (node.children.length == 0) {
                    if (node.iscamera == "1")
                        $li.find('.jqtree-title').css("background", "url('../../Resource/themes/default/images/Default/camera.png') no-repeat");
                }
            }
        };
        $(function () {

            $('#tree1').tree(treePara);
            $("#tip_content2").hide();
            BindTreeClick();

            //$("#btnSearch").click(function () {
            //    var dataUrl = "CameraBranchNavigation.aspx?Json=1&Search=" + $("#QueryText").val();
            //    $('#tree1').tree('loadDataFromUrl', dataUrl);
            //});
            //var dd = $(".jqtree-tree[role='tree']");
            //dd.eq(0).css({ "height": "0" });
        });

        $(function () {
            autoSize();
            $(window).resize(function () {
                autoSize();
            });

            $("#toggle").click(function () {
                if ($(this).html() == '-') {
                    width = width + 300;
                    $(this).html('+');
                    $("#left_d").find("#tree1").fadeOut();
                    $("#left_d").animate({ width: '20px' }, 500);
                    $("#right_d").animate({ width: width }, 500);
                    width = width - 300;
                    //alert(width);
                } else {
                    $(this).html('-');
                    $("#left_d").find("#tree1").delay("fast").fadeIn();
                    $("#left_d").animate({ width: '320px' }, 500);
                    $("#right_d").animate({ width: width }, 500);
                }
            });
        });

        function autoSize() {
            width = $(window).outerWidth() - $("#left_d").outerWidth() - 29;
            height = $(window).outerHeight() - 14;
            $("#right_d").css({ "width": width, "height": height });
            $("#Iframe").css({ "height": height });
            $("#left_d").css({ "height": height });
        }
    </script>
</body>
</html>
